<template>
  <section id="dashboard" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <!-- 标题区 -->
      <div class="text-center mb-12" style="text-align: center;">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-primary" style="font-size: 30px; font-weight: bold;">学习看板</h2>
        <p class="text-gray-600 max-w-2xl mx-auto" style="font-size: 16px; color: #666;">追踪你的学习进度和成就</p>
      </div>
      <!-- 数据卡片区 -->
      <a-row :gutter="32" class="mb-14">
        <a-col :xs="24" :md="6">
          <a-card hoverable class="dashboard-card">
            <div class="dashboard-card-content">
              <div class="dashboard-card-title">今日学习时长</div>
              <div class="dashboard-card-value text-green-600">2.5小时</div>
              <div class="dashboard-card-icon bg-blue-100 text-blue-500">
                <i class="fa fa-clock-o"></i>
              </div>
              <div class="dashboard-card-desc text-green-600">
                <i class="fa fa-arrow-up mr-1"></i>比昨天增加 30分钟
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="6">
          <a-card hoverable class="dashboard-card">
            <div class="dashboard-card-content">
              <div class="dashboard-card-title">本周学习天数</div>
              <div class="dashboard-card-value text-green-600">5天</div>
              <div class="dashboard-card-icon bg-purple-100 text-purple-500">
                <i class="fa fa-calendar"></i>
              </div>
              <div class="dashboard-card-desc text-green-600">
                <i class="fa fa-arrow-up mr-1"></i>比上周增加 1天
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="6">
          <a-card hoverable class="dashboard-card">
            <div class="dashboard-card-content">
              <div class="dashboard-card-title">已完成任务</div>
              <div class="dashboard-card-value text-green-600">12个</div>
              <div class="dashboard-card-icon bg-green-100 text-green-500">
                <i class="fa fa-check-circle"></i>
              </div>
              <div class="dashboard-card-desc text-green-600">
                <i class="fa fa-arrow-up mr-1"></i>比上周增加 4个
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="6">
          <a-card hoverable class="dashboard-card">
            <div class="dashboard-card-content">
              <div class="dashboard-card-title">获得积分</div>
              <div class="dashboard-card-value text-green-600">350分</div>
              <div class="dashboard-card-icon bg-orange-100 text-orange-500">
                <i class="fa fa-trophy"></i>
              </div>
              <div class="dashboard-card-desc text-green-600">
                <i class="fa fa-arrow-up mr-1"></i>比上周增加 120分
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <!-- 学习进度和排行榜 -->
      <a-row :gutter="32" class="mb-12">
        <a-col :xs="24" :md="16">
          <a-card hoverable class="dashboard-panel">
            <div class="flex justify-between items-center mb-8">
              <h3 class="text-xl font-bold">学习进度</h3>
              <div class="flex space-x-2">
                <a-button type="primary" size="small" class="rounded-full px-4">本周</a-button>
                <a-button size="small" class="rounded-full px-4">本月</a-button>
                <a-button size="small" class="rounded-full px-4">全部</a-button>
              </div>
            </div>
            <div>
              <canvas id="learningProgressChart" width="400" height="250"></canvas>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="8">
          <a-card hoverable class="dashboard-panel dashboard-rank-panel">
            <div class="flex justify-between items-center mb-8">
              <h3 class="text-xl font-bold">小组排行榜</h3>
              <a href="#" class="text-primary hover:underline">查看全部</a>
            </div>
            <div class="dashboard-rank-list">
              <div class="dashboard-rank-item dashboard-rank-item-active">
                <div class="dashboard-rank-index bg-blue-500 text-white">1</div>
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="dashboard-rank-avatar">
                <div class="dashboard-rank-info">
                  <div class="dashboard-rank-name">李大神</div>
                  <div class="dashboard-rank-group">Web前端开发小组</div>
                </div>
                <div class="dashboard-rank-score">
                  <div class="dashboard-rank-score-value">480分</div>
                  <div class="dashboard-rank-score-label">本周</div>
                </div>
              </div>
              <div class="dashboard-rank-item">
                <div class="dashboard-rank-index">2</div>
                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="dashboard-rank-avatar">
                <div class="dashboard-rank-info">
                  <div class="dashboard-rank-name">王小明</div>
                  <div class="dashboard-rank-group">React实战小组</div>
                </div>
                <div class="dashboard-rank-score">
                  <div class="dashboard-rank-score-value">420分</div>
                  <div class="dashboard-rank-score-label">本周</div>
                </div>
              </div>
              <div class="dashboard-rank-item">
                <div class="dashboard-rank-index">3</div>
                <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="dashboard-rank-avatar">
                <div class="dashboard-rank-info">
                  <div class="dashboard-rank-name">张小红</div>
                  <div class="dashboard-rank-group">Vue.js深入学习小组</div>
                </div>
                <div class="dashboard-rank-score">
                  <div class="dashboard-rank-score-value">390分</div>
                  <div class="dashboard-rank-score-label">本周</div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <!-- 今日任务 -->
      <a-card hoverable class="custom-card mt-14 transition-all flex flex-col p-0">
        <div class="flex justify-between items-center mb-8 px-6 pt-6">
          <h3 class="text-2xl font-bold text-success">今日任务</h3>
          <a-button type="primary" class="rounded-full px-4" @click="$emit('createTask')">
            <i class="fa fa-plus mr-1"></i> 新建任务
          </a-button>
        </div>
        <div class="space-y-6 max-h-[240px] overflow-y-auto scrollbar-hide px-6 pb-6">
          <div class="p-5 border border-gray-100 rounded-xl flex items-center bg-gray-50 hover:bg-primary/5 transition-all shadow-sm">
            <a-checkbox :checked="task1.completed" @change="(e: any) => $emit('update:task1', { ...task1, completed: e.target.checked })" class="mr-6 scale-125"></a-checkbox>
            <div class="flex-grow">
              <div class="font-medium text-lg">完成Vue组件开发练习</div>
              <div class="text-sm text-gray-400">预计耗时: 1小时30分钟</div>
            </div>
            <div class="text-right ml-6">
              <div class="text-xs bg-warning/20 text-warning px-3 py-1 rounded-full">今天</div>
            </div>
          </div>
          <!-- 其余任务项省略，可按需补充 -->
        </div>
      </a-card>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { Row, Col, Card, Button, Checkbox } from 'ant-design-vue';
const props = defineProps([
  'selectedDate', 'task1', 'task2', 'task3', 'task4'
]);
const emit = defineEmits(['createTask', 'fetchDashboardData', 'update:selectedDate', 'update:task1']);

function handleDateChange(val: any) {
  emit('update:selectedDate', val);
  emit('fetchDashboardData');
}
</script> 
<style scoped>
.dashboard-card {
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(22,93,255,0.08), 0 1.5px 4px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}
.dashboard-card:hover {
  box-shadow: 0 16px 40px rgba(22,93,255,0.12), 0 3px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-6px) scale(1.02);
}
.dashboard-card-content {
  padding: 32px 24px 24px 24px;
  position: relative;
  text-align: left;
}
.dashboard-card-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 8px;
}
.dashboard-card-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 12px;
}
.dashboard-card-icon {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #f0f6ff;
}
.bg-blue-100 { background: #eaf4ff !important; }
.text-blue-500 { color: #165dff !important; }
.bg-purple-100 { background: #f3eaff !important; }
.text-purple-500 { color: #722ed1 !important; }
.bg-green-100 { background: #eafff3 !important; }
.text-green-500 { color: #00b42a !important; }
.bg-orange-100 { background: #fff7ea !important; }
.text-orange-500 { color: #ff7d00 !important; }
.dashboard-card-desc {
  font-size: 15px;
  margin-top: 18px;
}
.dashboard-panel {
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(22,93,255,0.08), 0 1.5px 4px rgba(0,0,0,0.04) !important;
  background: #fff;
  min-height: 320px;
  padding: 32px 24px 24px 24px;
}
.dashboard-rank-panel {
  min-height: 320px;
}
.dashboard-rank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard-rank-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: none;
  transition: background 0.2s;
}
.dashboard-rank-item-active {
  background: #f5faff;
}
.dashboard-rank-index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaf4ff;
  color: #165dff;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.dashboard-rank-item-active .dashboard-rank-index {
  background: #165dff;
  color: #fff;
}
.dashboard-rank-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}
.dashboard-rank-info {
  flex: 1;
}
.dashboard-rank-name {
  font-weight: bold;
  font-size: 16px;
}
.dashboard-rank-group {
  font-size: 13px;
  color: #888;
}
.dashboard-rank-score {
  text-align: right;
}
.dashboard-rank-score-value {
  font-weight: bold;
  font-size: 18px;
}
.dashboard-rank-score-label {
  font-size: 12px;
  color: #888;
}
</style> 